<template>
    <view class="qiaoSelect" :class=" { 'ban': disabled } ">
        <input type="text" class="input" :class=" { 'input-border': showBorder } " @input=" watchInput "
            @focus=" focus " @blur=" blur " :placeholder=" phText " :placeholder-style=" 'color:' + phColor "
            @tap=" open " :disabled=" disabled " v-model=" inputText " />
        <view class="icon">
            <uni-icons type="close" size="18" color="#515151" class="img-close" @click=" clickClear "
                v-if="inputText !== '' && !disabled"></uni-icons>
            <view class="icon-jiantou" :class=" { 'icon-acitve': popupShow } ">
                <uni-icons type="right" size="18" color="#515151"></uni-icons>
            </view>
        </view>
        <view class="select" v-show=" popupShow ">
            <view class="box">
                <view style="color: #515151;font-size: 30rpx;" v-if="dataList.length == 0">
                    <view v-if="loading">
                        <u-loading-icon mode="circle" text="加载中" :show=" loading "></u-loading-icon>
                    </view>
                    <view v-else>
                        暂无数据
                    </view>
                </view>
                <view style="color: #515151;font-size: 30rpx;" v-if="filPersons.length == 0 && dataList.length != 0">
                    <view v-if="loading">
                        <u-loading-icon mode="circle" text="加载中" :show=" loading "></u-loading-icon>
                    </view>
                    <view v-else>
                        暂无数据
                    </view>
                </view>
                <view @touchstart=" touchst " v-for="(item, index) in filPersons" :key=" index ">
                    <view @click.stop="Check(item)" style="text-align: left;" class="li"
                        :class=" item.qiaoSelectKey == inputText ? 'blue' : '' ">
                        {{ item[showField] }}
                    </view>
                </view>
            </view>
        </view>
        <view class="popup" v-show=" popupShow " @click=" close ">
            <view>

            </view>
        </view>
    </view>
</template>

<script>
import {
    getFoodList
} from '@/api/index.js'
export default {
    props: {
        //下拉数据
        // dataList: {
        //     type: Array,
        //     default () {
        //         return []
        //     }
        // },
        //唯一键，用于多个关闭
        keyId: Number | String,
        //提示语
        phText: String,
        //提示语颜色
        phColor: {
            type: String,
            default: '#999999',
        },
        //指定搜索的属性
        searchKey: {
            type: String,
            default: 'name'
        },
        //是否显示边框
        showBorder: {
            type: Boolean,
            default: true,
        },
        //默认显示的条目
        showObj: {
            type: Object,
            default: null,
        },
        //展示的字段
        showField: {
            type: String,
            default: 'name'
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data () {
        return {
            timer: '', //定时器
            popupShow: false,
            inputText: '',
            isInput: true, //是否输入，如果输入开始模糊查询
            loading: false,
            dataList: [],
        }
    },
    onLoad () { },
    computed: {
        filPersons: {
            get () {
                if (!this.isInput) {
                    return this.dataList
                } else {
                    return this.dataList.filter((item) => {
                        if (item.qiaoSelectKey) {
                            return item.qiaoSelectKey.indexOf(this.inputText) != -1
                        } else {
                            return []
                        }
                    })
                }
            },
            set (val) { }
        }

    },
    watch: {
        inputText: {
            immediate: true,
            handler (val) {
                this.filPersons = this.dataList.filter((item) => {
                    if (!item.qiaoSelectKey) return
                    return item.qiaoSelectKey.indexOf(val) != -1
                })
            }
        },
        // dataList: {
        //     immediate: true,
        //     handler (val) {
        //         if (this.dataList.length > 0) {
        //             this.dataList.forEach(item => {
        //                 Object.keys(item).map((key) => {
        //                     if (item[this.searchKey]) {
        //                         item.qiaoSelectKey = item[this.searchKey].toString()
        //                     } else if (item[this.showField]) { //没有指定搜索字段，默认搜索展示字段
        //                         item.qiaoSelectKey = item[this.showField].toString()
        //                     }
        //                 })
        //             })
        //             this.inputText = ''
        //         }
        //     }
        // },
        //监听赋值
        showObj: {
            handler (val) {
                if (val) {
                    this.inputText = val[this.showField]
                    this.$emit('input', [val])
                    this.$emit('change', val)
                } else {
                    this.inputText = ''
                    this.$emit('input', [])
                    this.$emit('change', null)
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        handleGetFoodList () {
            this.loading = true
            let params = {
                foodName: this.inputText,
                page: 1,
                size: 2000,
            }
            getFoodList(params).then((res) => {
                this.loading = false
                this.dataList = res.data.list.map((val) => {
                    return {
                        name: val.foodName,
                        id: val.id,
                    }
                })
            })
        },
        clickClear () {
            this.inputText = ''
            this.loading = false
            this.$emit('input', [])
            this.$emit('change', null)
        },
        touchst () {
            if (this.disabled) return;
            this.popupShow = true
        },
        focus () {
            this.isInput = false
        },
        watchInput (e) { //键盘输入
            this.isInput = true
            if (this.inputText) {
                setTimeout(() => {
                    this.handleGetFoodList()
                }, 200);
            } else {
                this.loading = false
                this.dataList = []
                this.$emit('input', [])
                this.$emit('change', null)
            }
            // if (this.inputText === '') {
            //     this.$emit('input', [])
            //     this.$emit('change', null)
            // }
        },
        Check (i) { //选择选项
            this.inputText = i[this.showField]
            this.isInput = false
            this.close()
            this.$emit('change', i)
        },
        open () {
            if (this.disabled) return;
            uni.setStorageSync('keyId', this.keyId)
            this.popupShow = true
        },
        close () { //关闭
            this.popupShow = false
        },
        blur () {
            this.timer = setInterval(() => {
                if (this.popupShow && uni.getStorageSync('keyId') != this.keyId) {
                    this.popupShow = false
                }
                setTimeout(() => {
                    clearInterval(this.timer)
                }, 100)
            }, 200)
        },
    }
}
</script>

<style lang="scss" scoped>
$height: 60rpx;

.ban {
    background: #F7F7F6;
}

.qiaoSelect {
    margin: 0;
    padding: 0;
    position: relative;
    height: $height;
    display: flex;
    align-items: center;
    width: 100%;
    .img-close {
        margin: 0 10rpx;
    }

    .icon {
        width: 92rpx;
        z-index: 99;
        display: flex;
        justify-content: flex-end;
    }

    .input {
        flex: 1;
        border-radius: 10rpx;
        height: $height;
        padding: 0;
        font-size: 30rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        color: #666666;
    }

    .input-border {
        border: 1rpx solid #ECECEC;
        padding-left: 20rpx;
    }

    .select {
        width: 100%;
        padding: 20rpx;
        color: #606266;
        position: absolute;
        top: 90rpx;
        left: 0;
        right: 0;
        z-index: 100;
        font-size: 30rpx;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        box-sizing: border-box;
        margin: 5px 0;

        .box {
            max-height: 300rpx;
            overflow: scroll;
        }

        .li {
            padding: 10rpx 0;
        }

        .blue {
            color: #55aaff;
        }
    }

    .select::after {
        width: 0px;
        height: 0px;
        position: absolute;
        bottom: 100%;
        left: 10%;
        padding: 0;
        border: 16rpx solid transparent;
        border-color: transparent transparent #fff transparent;
        content: '';
    }

    .select::before {
        width: 0px;
        height: 0px;
        position: absolute;
        bottom: 100%;
        left: 10%;
        padding: 0;
        border: 20rpx solid transparent;
        border-color: transparent transparent #f3f3f3 transparent;
        transform: translate(-4rpx, 0);
        content: '';
    }

    .popup {
        position: absolute;
        z-index: 9;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        view {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
    }

    .icon-jiantou {
        transition: all 100ms linear;
    }

    .icon-acitve {
        transform: rotate(90deg);

    }
}
</style>